import React, { Component } from 'react';
import Taro from '@tarojs/taro';
import {Button, Image, ScrollView, Swiper, SwiperItem, View} from "@tarojs/components";
import GzhAuth from "../../components/gzh-auth/gzh-auth"
import {h5Wx} from "../../utils/h5.service";
import './index.scss';
import {
  INFORMATION_APP_LIST,
  INFORMATION_APP_INFO,
  RESOURCE_URL,
  TARO_ENV,
  SHORT_URL,
  CONTENT_TALENT_QR
} from '../../constants/api'
import {http} from "../../utils/http";
import {user} from "../../utils/user.service";
import {vcmonitor} from "../../utils/tools";
import {AtIcon} from "taro-ui";
import {newHttp} from "../../utils/request";
import LiveCode from "../../components/liveCode/liveCode";
import {platform} from "../../utils/platform-settting.service";
import '../../components/liveCode/liveCode.scss'

export default class Index extends Component {
  state: {
    tableData: any
    imagesList: any
    categoryList: any
    bottomNavId: number
    info: object
    qrImg: string
    qrImgDescribe: any
    modalShow: boolean
  } = {
    imagesList: [],
    tableData: [],
    categoryList: [],
    bottomNavId: 0,
    info: {},
    qrImg: '',
    qrImgDescribe: '',
    modalShow: false
  }

  async UNSAFE_componentWillMount() {
    if (process.env.TARO_ENV === 'h5') {
      await h5Wx.getConfig()
    }
    const res = await http.HGet(CONTENT_TALENT_QR);
    this.setState({qrImg: res.data.code, qrImgDescribe: res.data.code_describe})
  }

  page
  total
  length = 10

  getData() {
    const tableData = []
    return tableData || []
  }

  categoryListClick(bottomNavId) {
    this.setState({bottomNavId}, async () => {
      const res = await http.HPost(INFORMATION_APP_LIST, {category_id: this.state.bottomNavId})
      if (res) {
        this.setState({
          tableData: res.data
        })
      }
    })

  }

  jump(uuid) {
    let mpkey = ''
    const uInfo = Taro.getStorageSync('user') || ''
    if (uInfo && uInfo.mpkey && uInfo.mpkey !== 'undefined') {
      mpkey = uInfo.mpkey
    }
    Taro.navigateTo({url: `/main/lectureRoom/detail?uuid=${uuid}&mpkey=${mpkey}`})
  }

  jumpLink(url) {
    if ('' != url && null != url) {
      Taro.navigateTo({url})
    }
  }

  async componentDidShow() {
    const isLogin = await user.checkLogin()
    if (!isLogin) {
      Taro.showToast({
        title: '你还未登录，请登录',
        icon: 'none',
      })
      const timer = setTimeout(() => {
        clearTimeout(timer)
        user.jumpLogin()
      }, 1500)
      return
    }
    vcmonitor(this)
    const infoRes = await http.HPost(INFORMATION_APP_INFO, {})
    if (infoRes) {
      this.setState({
        info: infoRes.data,
        imagesList: infoRes.data.bannerList,
        categoryList: infoRes.data.categoryList,
        bottomNavId: infoRes.data.categoryList.length > 0 && infoRes.data.categoryList[0].id
      })
      const res = await http.HPost(INFORMATION_APP_LIST, {category_id: (infoRes.data.categoryList.length > 0 && infoRes.data.categoryList[0].id) || 0})
      if (res) {
        this.setState({
          tableData: res.data
        })
      }
    }

  }

  contactSite(){
    const { qrImg } = this.state
    if (!qrImg || qrImg === 'variable_code_close') {
      Taro.navigateTo({
        url: '/distributor/contact/contact'
      })
      return
    } else {
      this.setState({modalShow: true})
    }
  }

  render() {
    const {
      tableData,
      imagesList,
      categoryList,
      bottomNavId,
      info,
      modalShow,
      qrImg,
      qrImgDescribe
    } = this.state
    return (
      <View className='wrapper'>
        <GzhAuth />
        {imagesList && imagesList.length > 0 && <View className='wrapper-lecture-room-margin-t'>
          <Swiper className='swiper' autoplay interval={5000}>
            {imagesList && imagesList.length > 0 && imagesList.map((item, index) => <SwiperItem className='swiperItem'
              key={index}
            >
              <Image className='img' src={info.resourceDomain + item.img} mode='aspectFill'
                onClick={this.jumpLink.bind(this, item.link)}
              />
            </SwiperItem>)}
          </Swiper>
        </View>
        }
        {categoryList && categoryList.length > 0 && <View>
          <ScrollView scrollX enable-flex className='subNav'>
            <View className='nav-box'>
              {categoryList.length > 0 && categoryList.map(item =>
                <View key={item.id} onClick={this.categoryListClick.bind(this, item.id)}
                  className={`nav-item ${bottomNavId === item.id ? 'active' : ''}`}
                >{item.name}</View>
              )}
            </View>
          </ScrollView>
        </View>}
        {tableData && tableData.length > 0 && <View className='box'>
          {tableData.map(item => <View className='items' key={item.id}>
            <View className='items-left' onClick={this.jump.bind(this, item.uuid)}>
              <Image className='img' src={info.resourceDomain + item.img} mode='aspectFill' />
            </View>
            <View className='items-right' onClick={this.jump.bind(this, item.uuid)}>
              <View>
                <View className='title'>{item.title}</View>
                <View className='sub-title'>{item.sub_title}</View>
              </View>
              <View className='go-stu'>
                <View className='btn'>去学习</View>
              </View>
            </View>
          </View>)}
        </View>}
        {imagesList.length === 0 && categoryList.length === 0 && tableData.length === 0 && <View className='listNull lectureRoomNull'>
          <Image src={`${RESOURCE_URL}/resources/images/shopnull.png`} mode='widthFix' />
          <View className='text'>什么都没有,去看看别的吧~</View>
        </View>}
        <View className='live-code'>
         <View className='live-code-logo'  onClick={this.contactSite.bind(this)}>
            <AtIcon value='icon icon-kefu-01' size='24' color='#000' />
          </View>
        </View>
        <LiveCode subTitle='添加您的专属顾问微信，' secondSubTitle='有任何问题将在第一时间回复' qrImg={qrImg} modalShow={modalShow} onClose={()=>{this.setState({modalShow: false})}} title={qrImgDescribe} />
      </View>
    )
  }
}
